<!-- 车间开机率 -->
<template>
    <div ref="chart" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
    name: 'OperatingRateChart',
    setup() {
        const chart = ref<HTMLElement | null>(null);
        let myChart: echarts.ECharts | null = null;

        const initChart = () => {
            if (chart.value) {
                myChart = echarts.init(chart.value);

                const option: echarts.EChartsOption = {
                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        data: ['车间1', '车间2', '车间3', '车间4'],
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '车间1',
                            type: 'line',
                            data: [80, 85, 75, 90, 70, 80, 95],
                        },
                        {
                            name: '车间2',
                            type: 'line',
                            data: [70, 75, 85, 80, 65, 75, 85],
                        },
                        {
                            name: '车间3',
                            type: 'line',
                            data: [60, 65, 75, 70, 55, 65, 75],
                        },
                        {
                            name: '车间4',
                            type: 'line',
                            data: [90, 95, 85, 100, 85, 90, 105],
                        },
                    ],
                };

                myChart.setOption(option);
            }
        };

        onMounted(() => {
            initChart();
        });

        onBeforeUnmount(() => {
            if (myChart) {
                myChart.dispose();
            }
        });

        return {
            chart,
        };
    },
});
</script>

<style scoped>

</style>